<template>
    <div class="wrap"  >
        <!-- 搜索栏 -->
        <div class="searchBar">
            <img src="@/assets/images/iconPark-left.svg" alt="" class="back" @click="router.push('/home')">
    
            <input type="text" placeholder="" v-MyFocus v-model="searchKeyWord" @keydown="keydown">
        
            <img src="@/assets/images/icon/搜索.svg" alt="" class="search">
        </div>
        <!-- 选择模式切换 -->
        <div class="searchSwitch">
            <router-link 
                :to="{
                    name:'singleSearch'
                }"
                active-class="active"
                >
                <span class="single">单品</span>
            </router-link>

            <router-link 
                active-class="active"
                :to="{
                    name:'activitySearch'
                    }">
                <span class="activity">活动</span>
            </router-link>
            <img src="@/assets/images/icon/三条杠.svg" alt="">
        </div>

        <!-- 路由展示区 -->
        <div v-loading="isSearching"  element-loading-background="#f2f2f2">
            <router-view>

            </router-view>
        </div>
        
    </div>
</template>
    
<script setup>
    import {ref,computed,reactive} from 'vue'
    import {useStore} from 'vuex'
    import { useRouter } from 'vue-router';
    const router = useRouter();
    const store = useStore();
    let searchKeyWord = ref('');
    //活动搜索
    const sortList = reactive(['礼服','多媒体','装饰','婚车','道具','其他']);
    let isSearching = ref(false);
    
    //回车开始搜索
    let keydown = function(e){
        //回车触发发送消息事件
        
        //单品搜索
        if (e.key == "Enter" ){
            //加载动画
            isSearching.value=true;
            setTimeout(() => {
                isSearching.value=false;
            }, 500);
            //单品搜索
            if (router.currentRoute.value.fullPath=="/search/singleSearch"){
                store.commit('goods/GET_KEY',searchKeyWord.value)
                store.dispatch('goods/getSearchGoodsList',searchKeyWord.value);
            }
            //活动搜索
            if (router.currentRoute.value.fullPath=="/search/activitySearch"){
                sortList.forEach((key,index) => {
                    
                    store.dispatch('goods/getActGoodsList',{key:key,index:index})
                });
            }
        }
    }
    
    //本地的自定义指令不需要显示注册，但是必须遵守vNameOfDirective 这样的命名规范：
    const vMyFocus = {
        mounted:(el)=>{
            el.focus();
        }
    }
    
</script>
    
<style lang="scss" scoped>
    .wrap{
    width: 4.28rem;
    height: 9.26rem;
    background-color: #F2F2F2;
    transition: none;
    
    /* 搜索栏 */
    .searchBar{
        position: relative;
        width: 4.28rem;
        height: 0.97rem;
        background-color: white;
        img.back{
            width: 0.24rem;
            height: 0.24rem;
            position: absolute;
            top:0.59rem;
            left:0.25rem;
        }
        
        img.search{
            width: 0.24rem;
            height: 0.24rem;
            position: absolute;
            top:0.59rem;
            right: 0.34rem;
        }
        input{
            width:3rem;
            height: 0.36rem;
            position:absolute;
            top:0.54rem;
            left: 0.62rem;
            background-color: #f2f2f2;
            border-radius: 0.2rem;
            border:none;
            box-sizing: border-box;
            padding-left: 0.20rem;
            font-size: 0.18rem;
        }


        button{
            position: absolute;
            right:0.02rem;
            top:0.023rem;
            width: 0.65rem;
            height: 0.33rem;
            border:none;
            background-color: rgba(129, 179, 55, 1);    
            border-radius: 0.90rem 0.90rem 0.90rem 0.90rem;
            color: rgba(255, 255, 255, 1);
            font-size: 0.18rem;
        }
    }
    
    //选择模式切换
    .searchSwitch{
        position:relative;
        display: flex;
        height: 1rem;
        width: 4.28rem;
        justify-content: center;
        align-items: center;

        span{
            width: 0.5rem;
            font-size: 0.24rem;
            color: #aaaaaa;
            font-weight: bold;
        }
        span.single{
            margin-right: 0.47rem;
        }

        a.active{
            span{
                color:$themeGreen;
            }
        }

        img{
            position: absolute;
            width: 0.24rem;
            height: 0.24rem;
            right: 0.4rem;
        }
    }

}


</style>